<template>
  <div class="topbox">
    <el-card shadow="never">
      <!-- 面包屑导航,从学科管理跳转过来则显示 -->
      <div slot="header" v-if="disDirectory">
        <el-breadcrumb>
          <el-breadcrumb-item>学科管理</el-breadcrumb-item>
          <el-breadcrumb-item>大数据</el-breadcrumb-item>
          <el-breadcrumb-item>目录管理</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <!-- 面包屑导航,从学科管理跳转过来则显示 -->

      <!-- 上方菜单 -->
      <el-form
        :inline="true"
        :model="form"
        ref="form"
        size="small">

        <el-form-item label="目录名称" prop="name">
          <el-input v-model.trim="form.name"></el-input>
        </el-form-item>

        <el-form-item label="状态" prop="status">
          <el-select v-model="form.status" placeholder="请选择">
            <el-option label="启用" value="1"></el-option>
            <el-option label="禁用" value="0"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button @click="hReseTablec">清除</el-button>
          <el-button type="primary" @click="hQuerytablec">查询</el-button>
        </el-form-item>

        <el-button
          class="filter-item fr"
          size="small"
          style="margin-left: 10px;"
          @click="handUserc('add')"
          type="success"
          icon="el-icon-edit">新增目录
        </el-button>

        <el-button
          type="text"
          class="filter-item fr"
          @click="hSwitchc"
          v-if="disDirectory"
          icon="el-icon-back">返回学科
        </el-button>
      </el-form>
      <!-- 上方菜单 -->

      <!-- 数据记录 -->
      <el-alert
        :title="alertText"
        type="info"
        show-icon
        :closable="false">
      </el-alert>
      <!-- 数据记录 -->

      <!-- 数据列表 -->
        <el-table :data="dataList" style="width: 100%">
          <el-table-column
            type="index"
            label="序号">
          </el-table-column>

          <el-table-column
            label="所属学科"
            prop="subjectName">
          </el-table-column>

          <el-table-column
            label="目录名称"
            prop="directoryName">
          </el-table-column>

          <el-table-column
            label="创建者"
            prop="username">
          </el-table-column>

          <el-table-column
            label="创建日期"
            prop="addDate">
          </el-table-column>

          <el-table-column
            label="面试题数量"
            prop="totals">
          </el-table-column>

          <el-table-column label="状态">
            <template slot-scope="scope">
              <span>
                {{scope.row.state === 1 ? '已启用' : '已禁用'}}
              </span>
            </template>
          </el-table-column>

          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                type="text"
                @click="hChangeTablec(scope.row.state, scope.row.id)">
                {{scope.row.state === 1 ? '禁用' : '启用'}}
              </el-button>

              <el-button
                type="text"
                :disabled='scope.row.state === 1 ? true : false'
                @click="handUserc(scope.row)">修改
              </el-button>

              <el-button
                type="text"
                :disabled='scope.row.totals > 0 || scope.row.state === 1  ? true : false'
                @click="delTablec(scope.row.id)">删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 数据列表 -->

        <!-- 分页 -->
        <div class="pat">
          <div>
            <el-pagination
              background
              @size-change="pagingnbc"
              @current-change="pagingc"
              layout="prev, pager, next, sizes, jumper"
              :page-sizes="[5, 10, 20, 50]"
              :page-size="10"
              :current-page="requestParameters.page"
              :total="total">
            </el-pagination>
          </div>
        </div>

        <!-- 新增目录弹层 -->
        <Dialog
          ref="editUser"
          :titleInfo="titleInfo"
          :formBase="formData"
          v-on:newData="hAddDirectoryc($event)">
        </Dialog>
    </el-card>
  </div>
</template>

<script>
// 导入时间过滤
import { parseTimeByString } from '@/filters/index.js'

// 导入获取目录,目录状态,目录删除,目录详情接口
import { list, changeState, remove, detail } from '@/api/hmmm/directorys.js'

// 导入弹层
import Dialog from './../components/directorys-add'

export default {
  name: 'directorys',
  components: {
    Dialog
  },

  watch: {
    '$route' (to, from) {
      if (to.query !== from.query) {
        this.requestParameters.subjectID = null
        this.requestParameters.page = 1
        this.getDirectoryc()
        this.disDirectory = false
      }
    }
  },

  data () {
    return {
      disabled: false, // 判断修改和删除按钮是否需要禁用
      form: { name: '', status: null }, // 目录名称和目录状态的数据
      requestParameters: {
        page: 1, // 第几页
        pagesize: 10 // 一页几行
      },
      disDirectory: false, // 判断返回学科按钮和面包屑导航是否出现
      titleInfo: {
        pageTitle: '目录', // 页面标题
        text: '' // 新增、编辑文本
      },
      formData: { // 给子组件传值
        directoryName: '',
        name: '',
        status: ''
      },
      pState: [], // 目录状态需要的id和状态值
      dataList: [], // 渲染表格的数据
      alertText: '', // 数据一共多少条
      total: null, // 请求回来数据的总数
      del: [], // 删除操作需要的数据
      editId: [] // 编辑操作需要的数据
    }
  },
  created () {
    // 判断是否由学科管理跳转进来,是则根据数据查询列表,否则正常加载
    this.getDirectoryc()
  },

  methods: {
    // 新增目录更新页面
    hAddDirectoryc (page) {
      this.hReseTablec()
      this.requestParameters.page = page === 1 ? 1 : this.requestParameters.page
      page === 1 ? this.hQuerytablec() : this.getListc()
    },
    // 获取列表信息
    async getListc (params) {
      try {
        const { data: res } = await list(this.requestParameters)
        this.total = res.counts
        this.alertText = `数据一共 ${this.total} 条`
        this.dataList = res.items
        this.state = res.state
        // 时间过滤
        this.dataList.forEach(el => {
          el.addDate = parseTimeByString(el.addDate)
        })
      } catch (err) {
        console.log(err)
      }
    },

    // 点击分页的时候获取列表
    pagingc (val) {
      this.requestParameters.page = val
      this.getListc()
    },

    // 点击每页显示个数时候获取列表
    pagingnbc (val) {
      this.requestParameters.page = 1
      this.requestParameters.pagesize = val
      this.getListc()
    },

    // 目录状态
    async hChangeTablec (val, id) {
      try {
        this.pState.id = id
        this.pState.state = val === 1 ? 0 : 1
        await changeState(this.pState)
        this.getListc()
        this.$message.success('操作成功')
      } catch (err) {
        console.log(err)
        this.$message.error('操作失败')
      }
    },

    // 删除目录
    async delTablec (id) {
      this.del.id = id
      this.$confirm('此操作将永久删除 ' + ', 是否继续?', '提示', {
        type: 'warning'
      }).then(async () => {
        try {
          await remove(this.del)
          this.$message.success('成功删除' + '!')
          this.getListc()
        } catch (err) {
          this.$message.error('删除失败!')
        }
      })
        .catch(() => {
          this.$message.info('已取消操作!')
        })
    },

    // 新增,编辑后清空数据
    Addedc () {
      this.formData = {}
    },

    // 新增用户、编辑目录
    handUserc (row) {
      this.Addedc()
      this.$refs.editUser.dialogFormV()
      if (row === 'add') {
        this.titleInfo.text = '新增' // 给弹层传参
      } else {
        this.titleInfo.text = '修改' // 给弹层传参
        this.ediTablec(row)
      }
    },

    // 修改目录
    async ediTablec (editId) {
      try {
        this.editId.id = editId.id
        const { data: res } = await detail(this.editId)
        this.formData = res
        this.formData.subjectName = editId.subjectName
      } catch (err) {
        console.log(err)
      }
    },

    // 点击清除,清空表单
    hReseTablec () {
      this.$refs.form.resetFields()
    },

    // 点击查询,获取列表
    hQuerytablec () {
      this.requestParameters.directoryName = this.form.name
      this.requestParameters.state = this.form.status
      this.requestParameters.page = 1
      this.getListc(this.requestParameters)
    },

    // 判断渲染列表应该选择的数据
    getDirectoryc () {
      if (this.$route.query.id) {
        this.disDirectory = true
        this.requestParameters.subjectID = this.$route.query.id
        this.getListc(this.requestParameters)
      } else {
        this.getListc(this.requestParameters)
      }
    },

    // 返回学科
    hSwitchc () {
      this.$router.push({ name: 'subjects-list' })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.topbox {
  padding: 10px;
}

.pat {
  text-align: right;
}

</style>
